<template>
	<view class="container">
		<!-- 头部 -->
		<view class="top">
			<view class="left" @click="goBack">
				<image src="/static/img/leftico.png" mode="aspectFill" width="20px"></image>
			</view>
		</view>
		<view style="height: 60px;"></view>
		<!-- end -->
		<view class="tianxie">
			<image src="/static/img/pay_banner.png" mode="widthFix" style="width: 100%; height: auto;">
				<view class="zhoinjiand">
					<view class="tianxie-h1">请输入测算所需要的信息</view>
					<view class="ul">
						<view class="liview fftt">
							<text class="left">姓名：</text>
							<view class="bg_no rightnew" style="flex: 1 1 0%;">
								<input type="text" placeholder="请输入名字（必须汉字）" v-model="name">
							</view>
						</view>
						<view class="liview">
							<text class="left">性别：</text>
							<view class="rilist fftt rightnew">
								<view class="cur" :class="{'curz': selectedSex === '男'}" @click="selectSex('男')">男
								</view>
								<view class="cur" :class="{'curz': selectedSex === '女'}" @click="selectSex('女')">女
								</view>
							</view>

							<input type="hidden" :value="selectedSex" style="display: none;">

						</view>
						<view class="liview" @click="openBetterCalendar">
							<text class="left">时辰</text>
							<view class="auto wot rightnew" style="width: 240px;" >
								<input id="selectdate" type="text" placeholder="请选择出生日期" readonly v-model="birthDate">
							</view>
							<image src="/static/img/date.png" mode="widthFix" alt="" style="width: 25px; height: 25px;">
						</view>
					</view>
				</view>
				
				

				        <e-run-calendar ref="betterCalendarRef" :showCalendar="showCalendar" @confirm="selectDate" :isHourShow="true"
				                @cancel="showCalendar = false" :selectOptions="selectOptionsArr"></e-run-calendar>
								
				<view class="bottond" @click="submitInfo">
					<image src="/static/img/btn.png" />
				</view>
				<view class="textyud">测试部分免费，获取报告或解锁全部内容时，需付费查看</view>
				<view class="textyud1">
					<image src="/static/img/tishi.png" mode="widthFix" style="width: 100%; height: auto;" />
				</view>
		</view>
		<!-- 消息通知框 -->
		<view class="nocie" :style="{display: messageDisplay}">{{ message }}</view>
		
	</view>
</template>

<script>
	import dayjs from "dayjs";
	import BetterCalendar from "@/components/better-calendar";


	export default {
		data() {
			
			

			const INIT_DAY_TYPE = "solar";
			const INIT_DAY_TIMESTAMP = dayjs().valueOf();
			const INIT_DAY = dayjs().format("YYYY-MM-DD");
			return {
				
				showCalendar: false,//是否显示组件
				celenderValue: '',//选择值
				selectOptionsArr: [30, 0, 0, 0],//起始年份			   
				name: '',
				selectedSex: '男',
				birthDate: '',
				birthDateValue: '',
				message: '',
				messageDisplay: 'none',
				birthdayInfo : {
				    text: "",
				    type: "lunar",
				    brithday: {
				    date: "",
				    hour: 0,
				    year: "",
				    month: "",
				    day: "",
				    leap_month: 0
				},
				}
			};
		},
		components: {
	
		},
		methods: {
			openBetterCalendar() {
				this.showCalendar = true;
			},
			async selectDate(e) {
				console.log(e);
			let text=e.text;
			let date=e.date;
			let hour=e.hour;
			let type=e.type;
			this.birthdayInfo=e
			 //type="lunar"//农历 solar//公历	
			this.birthDateValue=e.date
			this.birthDate=text;
		   this.showCalendar = false;
			},
			goBack() {
				uni.navigateBack();
			},
			selectSex(sex) {
				this.selectedSex = sex;
			},
			submitInfo() {
				if (!this.name) {
					this.showMessage("请输入姓名");
					return;
				}
				if (/[^\u4e00-\u9fa5]/.test(this.name)) {
					this.name = ""
					this.showMessage("请输入汉字");
					return;
				}
				if (!this.birthDate) {
					this.showMessage("请选择出生日期");
					return;
				}
				console.log(this.name, this.selectedSex, this.birthDate);
				let userinfo={
					userName:this.name,
					birthDateValue:this.birthDateValue,
					birthDate:this.birthDate,
					selectedSex:this.selectedSex,
					birthdayInfo:this.birthdayInfo,
				}
				uni.setStorageSync("userinfo",JSON.stringify(userinfo))
				uni.navigateTo({
					url:"/pages/result/result"
				})
				// 提交信息逻辑...
			},
			showMessage(msg) {
				this.message = msg;
				this.messageDisplay = 'block';
				setTimeout(() => {
					this.messageDisplay = 'none';
				}, 1000);
			}
		}
	};
</script>

<style scoped>
	page {
		background-color: #202045;
	}

	.top {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 45px;
		line-height: 45px;
		text-align: center;
		display: flex;
		padding: 5px;
		background: #202045;
	}

	.left {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.left image {
		width: 20px;
		height: 20px;
	}

	.zhoinjiand {
		position: relative;
		padding: 5px 10px;
		margin: 0 15px;
		background-color: #38386c;
		border-radius: 5px;
		border: 1px solid hsla(0, 0%, 100%, .3);
	}

	.zhoinjiand .tianxie-h1 {
		width: 345px;
		height: 40px;
		background: url() no-repeat;
		background-size: 100% 100%;
		text-align: center;
		color: #fff;
		font-weight: 700;
		font-size: 18px;
		line-height: 40px;
		margin-left: 50%;
		margin-top: -22px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.zhoinjiand .ul {
		margin: 30px 0 20px;
	}

	.zhoinjiand .liview {
		background-color: #565690;
		position: relative;
		margin-bottom: 20px;
		height: 42px;
		line-height: 42px;
		border-radius: 20px;
		color: #efefff;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.fftt {
		display: flex;
		align-items: center;
	}

	.zhoinjiand .liview .left {
		width: 60px;
		padding-left: 15px;
		color: #fff;
	}

	.left {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rightnew {
		margin-left: 80px;
	}

	.zhoinjiand .curz {
		background-color: #efc15d;
		color: #021032;
	}

	.cur {
		padding: 0;
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 50%;
		margin: 0px 30px 0 0;
		color: #a7a7db;
		cursor: pointer;
	}


	.tui-notice__bar {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		background-color: rgb(51, 51, 51);
		padding: 0px;
		height: 27px;
		top: auto;
	}

	.tui-notice__fixed {
		position: fixed;
		left: 0;
		z-index: 100
	}

	.tui-notice__shrink {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer
	}

	.tui-notice__wrap {
		flex: 1;
		flex-direction: column;
		overflow: hidden
	}

	.tui-notice__wrap-scroll {
		flex-direction: row
	}

	.tui-notice__wrap-scroll {
		position: relative
	}

	.tui-notice__content {
		flex: 1;
		display: block;
		overflow: hidden
	}

	.tui-notice__text {
		word-break: break-all
	}

	.tui-notice__content-single {
		display: flex;
		flex: none;
		width: 100%;
		justify-content: center
	}

	.tui-notice__single {
		display: block;
		width: 100%;
		white-space: nowrap;
		flex-direction: row;
		overflow: hidden;
		text-overflow: ellipsis
	}


	.banner {
		height: 512px;
		background: url(/static/img/banner.png) no-repeat;
		background-size: 100% 100%;
		overflow: hidden
	}


	.banner .zhuanpan {
		width: 325px;
		height: 325px;
		position: relative;
		margin-top: 50px;
		margin-left: 215px
	}

	.banner .banner_bottom {
		width: 325px;
		height: 325px;
		background: url(/static/img/bottom.png) no-repeat;
		background-size: 100% 100%;
		-webkit-animation: bottomRorating-data-v-63a34b41 5s linear infinite;
		animation: bottomRorating-data-v-63a34b41 5s linear infinite
	}

	.banner .banner_middle {
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
		width: 225px;
		height: 225px;
		background: url(/static/img/middle.png) no-repeat;
		background-size: 100% 100%;
		-webkit-animation: middleRorating-data-v-63a34b41 5s linear infinite;
		animation: middleRorating-data-v-63a34b41 5s linear infinite
	}

	.banner .taiji {
		position: absolute;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
		width: 140px;
		height: 140px;
		background: url(/static/img/taiji.png) no-repeat;
		background-size: 100% 100%
	}

	@-webkit-keyframes bottomRorating-data-v-63a34b41 {
		0% {
			-webkit-transform: rotate(0);
			transform: rotate(0)
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn)
		}
	}

	@keyframes bottomRorating-data-v-63a34b41 {
		0% {
			-webkit-transform: rotate(0);
			transform: rotate(0)
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn)
		}
	}

	@-webkit-keyframes middleRorating-data-v-63a34b41 {
		0% {
			-webkit-transform: translate(-50%, -50%) rotate(0);
			transform: translate(-50%, -50%) rotate(0)
		}

		to {
			-webkit-transform: translate(-50%, -50%) rotate(-1turn);
			transform: translate(-50%, -50%) rotate(-1turn)
		}
	}

	@keyframes middleRorating-data-v-63a34b41 {
		0% {
			-webkit-transform: translate(-50%, -50%) rotate(0);
			transform: translate(-50%, -50%) rotate(0)
		}

		to {
			-webkit-transform: translate(-50%, -50%) rotate(-1turn);
			transform: translate(-50%, -50%) rotate(-1turn)
		}
	}

	.bottond {
		z-index: 9999
	}

	.bottond image {
		display: block;
		width: 350px;
		height: 50px;
		margin: 20px auto;
		-webkit-animation: bamiao-data-v-63a34b41 2s linear infinite;
		animation: bamiao-data-v-63a34b41 2s linear infinite
	}

	.bottonds {
		z-index: 9999;
		position: fixed;
		bottom: 15px;
		left: 50%;
		margin-left: -175px
	}

	.bottonds image {
		display: block;
		width: 350px;
		height: 50px;
		margin: 20px auto 0;
		-webkit-animation: bamiao-data-v-63a34b41 2s linear infinite;
		animation: bamiao-data-v-63a34b41 2s linear infinite
	}

	@-webkit-keyframes bamiao-data-v-63a34b41 {
		0% {
			-webkit-transform: scale(.9);
			transform: scale(.9)
		}

		50% {
			-webkit-transform: scale(1);
			transform: scale(1)
		}

		100% {
			-webkit-transform: scale(.9);
			transform: scale(.9)
		}
	}

	@keyframes bamiao-data-v-63a34b41 {
		0% {
			-webkit-transform: scale(.9);
			transform: scale(.9)
		}

		50% {
			-webkit-transform: scale(1);
			transform: scale(1)
		}

		100% {
			-webkit-transform: scale(.9);
			transform: scale(.9)
		}
	}

	.mylist {
		text-align: center;
		color: #f9d560;
		font-size: 14px;
	}

	.imgafg {
		padding: 15px 15px
	}

	.imgafg image {
		width: 100%;
		height: 100%;
		margin-bottom: 10px
	}

	.haishen {
		margin-top: 10px;
		padding: 20px;
		margin-bottom: 200px;
	}

	.haishen image {
		width: 100%
	}


	/* 填写 */
	.top {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 45px;
		line-height: 45px;
		text-align: center;
		display: flex;
		padding: 5px;
		background: #202045;
	}

	.left {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top .center {
		width: 100%;
		margin-left: 50px;
	}

	.zhoinjiand {
		position: relative;
		padding: 5px 10px;
		margin: 0 15px;
		background-color: #38386c;
		border-radius: 5px;
		border: 1px solid hsla(0, 0%, 100%, .3);
	}

	.zhoinjiand .tianxie-h1 {
		width: 345px;
		height: 40px;
		background: url() no-repeat;
		background-size: 100% 100%;
		text-align: center;
		color: #fff;
		font-weight: 700;
		font-size: 18px;
		line-height: 40px;
		margin-left: 50%;
		margin-top: -22px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.zhoinjiand .ul {
		margin: 30px 0 20px;
	}

	.zhoinjiand .liview {
		background-color: #565690;
		position: relative;
		margin-bottom: 20px;
		height: 42px;
		line-height: 42px;
		border-radius: 20px;
		color: #efefff;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.fftt {
		display: flex;
		align-items: center;
	}

	.zhoinjiand .liview .left {
		width: 60px;
		padding-left: 15px;
		color: #fff;
	}

	.uni-input-form,
	.uni-input-wrapper {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		position: relative;
		width: 100%;
		height: 100%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.textyud {
		text-align: center;
		color: #fff;
		opacity: .7;
		font-size: 14px;
	}

	.textyud1 {
		margin: 30px 15px 0;
		padding-bottom: 50px;
	}

	.cur {
		padding: 0;
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 50%;
		margin: 0px 30px 0 0;
		color: #a7a7db;
		cursor: pointer;
	}

	.zhoinjiand .curz {
		background-color: #efc15d;
		color: #021032;
	}

	.liview input {
		width: 90%;
		padding: 8px 0 5px 8px;
		background: none;
		border: 0;
		color: #fff;
		font-size: 16px;
	}

	.liview input::placeholder {
		color: #fff;
		opacity: .5;
	}

	.nocie {
		position: fixed;
		display: none;
		top: calc((100vh - 45px) / 2);
		left: calc((100vw - 150px) / 2);
		width: 150px;
		background: #000;
		border-radius: 5px;
		text-align: center;
		line-height: 45px;
		color: #fff;
	}

	.box2 {
		background: #fff;
		margin: 25px 10px 20px;
		border-radius: 12px;
	}

	.post input {
		margin: 20px 20px;
		text-align: center;
		height: 50px;
		background: #f5f5f5;
		border-radius: 40px;
		width: 90%;
	}

	input {
		display: block;
		font-size: 16px;
		line-height: 1.4em;
		height: 1.4em;
		min-height: 1.4em;
		border: 0;
	}

	.button {
		display: inline-block;
		border-radius: 40px;
		width: 90%;
		height: 50px;
		text-align: center;
		font-size: 17px;
		line-height: 50px;
		margin: 0px 5% 20px;
		background-image: linear-gradient(90deg, #4f609c, #6e7fbd);
		color: #fff;
	}

	.font2 {
		font-size: 17px;
		width: 85%;
		font-weight: 700;
		margin: auto;
		margin-bottom: 20px;
	}

	.box3 {
		font-size: 15px;
	}

	.box3 .one {
		background: #fff;
		margin: 20px 10px;
		border-radius: 20px 20px 0 0;
		display: flex;
		justify-content: space-around;
		padding: 15px 0 15px 0;
	}

	.box3 .two {
		background: #fff;
		margin: -18px 10px 20px;
		border-radius: 0 0 20px 20px;
		padding: 10px 10px;
	}

	.box3 .two .tap {
		display: flex;
		margin-bottom: 10px;
	}

	.box3 .btn {
		display: flex;
		justify-content: flex-end;
	}

	.box3 .two span {
		margin: 0 25px 10px 7px;
		color: #c8c8c8;
	}

	.lisyd {
		width: 80px;
		height: 30px;
		background: #fff;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
		border-radius: 15px;
		color: #5e6fac;
		border: 1px solid #495a95;
		margin-left: 10px;
	}

	.liuio {
		text-align: center;
		font-size: 13px;
		color: #999;
		padding-bottom: 25px;
	}

	.rightnew {
		margin-left: 80px;
	}


	.uni-input-input {
		width: 90%;
		padding: 8px 0 5px 8px;
		background: none;
		border: 0;
		color: #fff;
		font-size: 16px;
	}

	.uni-input-placeholder {
		color: #fff !important;
	}
</style>